<!-- 进行中的订单 -->
<template>
  <div class="bord">
    <div class="h2Ttl" style="margin-bottom: 0"><i class="el-icon-s-order" style="color: rgb(149, 222, 100); margin-right: 10px"></i>正在进行中的订单</div>

    <el-carousel v-if="nearOrderList.length > 0" trigger="click" :autoplay="false" indicator-position="none">
      <el-carousel-item v-for="(item, index) in nearOrderList" :key="index">
        <el-row class="rowBox">
          <el-col :span="6">
            订单号:
            <span>{{ item.shippingNoteNumber }}</span>
          </el-col>
          <el-col :span="6">
            发货方:
            <span>{{ item.consignor }}</span>
          </el-col>
          <el-col :span="6">
            收货方:
            <span>{{ item.consignee }}</span>
          </el-col>
          <el-col :span="6">
            <el-button type="success" plain
              size="medium"
              icon="el-icon-view"
              @click="handleClick(item)">查看详情</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-steps :active="item.num"  align-center>
              <el-step title="待发车" icon="el-icon-mobile-phone" :description="item.createTime==null?'':'订单启时:'+item.createTime"></el-step>
              <el-step title="运输中" icon="el-icon-truck" :description="item.despatchActualDateTime==null?'':'运输开始:'+item.despatchActualDateTime"></el-step>
              <el-step title="已送达" icon="el-icon-success" :description="item.goodsReceiptDateTime==null?'':'送达时间:'+item.goodsReceiptDateTime"></el-step>
            </el-steps>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>

    <el-empty v-else description="暂无订单" :image-size="150"></el-empty>

  </div>
</template>

<script>
import { nearlyOrder } from '@/api/tws/order';
import { getCompanyByUserId } from '@/api/tws/company';

export default {
  components:{
  },
  data() {
    return {
      nearOrderList: []
    }
  },
  created() {
    this.getOrder();
  },
  methods: {
    getOrder() {
      let that = this;
      nearlyOrder().then(res => {
        that.nearOrderList = res.data;
        that.nearOrderList.forEach(response => {
          if (response.status == that.$store.state.constants.orderStatus_dfc) {
            response.num = 1;
          } else if(response.status == that.$store.state.constants.orderStatus_ysz) {
            response.num = 2;
          } else if(response.status == that.$store.state.constants.orderStatus_ywc) {
            response.num = 3;
          }
        })
      })
    },
    handleClick(row) {
      const id = row.id;
      this.$router.push({ path: '/order/orderDetail', query: { orderId: id }, replace: true });
    }
  }
}
</script>

<style>
  .spanAdd{
    font-size: 25px;
    text-align: center;
  }
  .rowAdd{
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .bord{
    /*padding: 30px 20px 0;*/
    background: #FFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .rowBox {
    margin-bottom: 30px;
    padding: 20px;
    text-align: center;
    background: #fcfafa;
    line-height: 40px;
  }

  .el-carousel__container {
    position: relative;
    height: 240px;
  }

.el-button--medium {
  padding: 12px 20px;
}
</style>
